<template>
	<view class="au_content">
		<!-- 返回，默认返回首页 -->
		<view class="au_return">
			<image :src="HTTP_IMG_UTL+'fanhui.png'" style="width: 28rpx;height: 40rpx;" mode="" @click="handelReturn" />
			<view></view>
		</view>
		<!-- 认证您的身份 -->
		<view class="au_imgs">
			<image :src="HTTP_IMG_UTL+'authentication_282@2x.png'" mode="" style="width:376rpx;height: 55rpx;"
				v-if="lang==='zh'" />
			<view v-if="lang==='ru'" style="font-size: 36rpx;font-weight: bold;">Подтверждение информации вашей компании
			</view>
			<view style="color: #404040;margin-top: 18rpx;" v-if="lang==='zh'">将获得智能助手，精准推送及专属图标</view>
			<view style="color: #404040;margin-top: 18rpx;" v-if="lang==='ru'">Получить виртуального помощника,
				push-уведомления и эксклюзивный значок</view>
		</view>
		<!-- 切换语言 -->
		<view class="au_lang">
			<view class="au_lang_ri">
				<view v-for="(item,index) in language" :key="index" @click="handelLang(index)"
					:class="index===indexID?'itemActive':'active'">{{item.name}}</view>
			</view>
		</view>
		<!-- 您的国籍文字 -->
		<view class="au_nationality_title">
			<view>{{$t('您的国籍')}}</view>
		</view>
		<!-- 选择国籍  -->
		<view class="au_nat">
			<view :class="index===countryID?'items':'items_active'" v-for="(item,index) in nationalitys" :key="index"
				@click="handelNationalitys(index)">
				<image :src="HTTP_IMG_UTL+'ru_img.png'" mode="" style="width: 104rpx;height: 104rpx;" v-if="index===1">
				</image>
				<image :src="HTTP_IMG_UTL+'zh_img.png'" mode="" style="width: 104rpx;height: 104rpx;" v-if="index===0">
				</image>
				<view v-if="index===0">{{$t('中国')}}</view>
				<view v-if="index===1">{{$t('俄罗斯')}}</view>
			</view>
		</view>
		<!-- 认证您的身份信息文字 -->
		<view class="au_identity_title">
			<view>{{$t('认证您的身份信息')}}</view>
		</view>
		<!-- form表单 -->
		<view class="au_form">
			<u-form labelPosition="top" :model="model" ref="uForm">
				<u-form-item :label="$t('所在地区')" prop="area_id">
					<view class="flex_1">
						<formCity :texthidden="true" :is_register="1" :item="cityItem" :is_port="true"
							@change="selCity" />
						<image :src="HTTP_IMG_UTL+'right_218@2x.png'" mode="" style="width: 25rpx;height: 12rpx;">
						</image>
					</view>
				</u-form-item>
				<u-form-item :label="$t('你的身份')" prop="identity_title" v-show="!!identityList && !!identityList.length">
					<!-- <view class="flex_1" @click="handelIdentity">
						<view style="display: flex;justify-content: flex-start;">
							<view style="color: #C76E21;font-size: 32rpx;" >
								{{identityTitle!==''?identityTitle:''}}
							</view>
							<view style="color: #808080;font-size: 32rpx;" >
								{{identityTitle ===''?$t('请选择身份'):''}}
							</view>
						</view>
						<image :src="HTTP_IMG_UTL+'right_218@2x.png'" mode=""
							style="width: 25rpx;height: 12rpx;"></image>
					</view> -->
					<view class="flex_1 wrap">
						<view class="identity_item" v-for="item in identityList" :key="item.id"
							:class="{active: item.active}" @click="handelConfirm(item)">
							{{ lang==='zh' ? item.name : item.name_ru }}
						</view>
					</view>
				</u-form-item>
				<u-form-item :label="$t('公司名称/姓名')" prop="username">
					<u-input :custom-style="{color: '#808080'}" v-model="model.username" :placeholder="$t('请输入公司名称/姓名')"
						clearable class="no_border" />
				</u-form-item>


			</u-form>
		</view>
		<!-- 下一步 -->
		<view class="au_but">
			<view style="width: 60%;">
				<u-button class="custom-style" @click="handelSubmit">{{$t('下一步')}}</u-button>
			</view>
		</view>
		<!-- 身份弹窗 -->
		<!-- <u-picker v-model="identityShow" mode="selector" :range="identityList" :range-key="lang==='zh'?'name':'name_ru'"
			:confirm-text="$t('确定')" :cancel-text="$t('取消')" @confirm="handelConfirm"
			:default-selector="[selectorIndex]" /> -->
		<view class="backColor"></view>

		<!-- 获取权限的功能 -->
		<Permission></Permission>
	</view>
</template>

<script>
	import {
		IMAGE_URL,
		HTTP_IMG_UTL
	} from "@/config/app";
	import formCity from "@/components/buildForm/formCity.vue";
	import Permission from "@/components/Permission.vue"
	export default {
		components: {
			formCity,
			Permission
		},
		data() {
			return {
				HTTP_IMG_UTL,
				selectorIndex: 0,
				// formCity  组件使用的配置文件
				cityItem: {
					key: "city_id",
					label: false,
					placeholder: this.$t('请选择所在地区'),
					type: "city",
					required: true,
					value: [],
					rules: {},
				},
				identityShow: false, //身份选择弹窗控制
				identityList: [], //身份
				identityTitle: '', //选择的身份
				identityId: '', //选择身份的id
				identityType: '', //选择身份的type值
				country: 0, //国家
				model: { //form表单
					identity_title: '', //身份名称
					username: '', //姓名或公司名称
					area_id: '', //城市地区
				},
				rules: { //form表单校验
					identity_title: [{
						required: true,
						message: this.$t('请选择身份'),
						trigger: ['blur', 'change']
					}],
					username: [{
						required: true,
						message: this.$t('请输入公司名称/姓名'),
						trigger: ['blur', 'change']
					}],
					area_id: [{
						required: true,
						message: this.$t('请选择所在地区'),
						trigger: ['blur', 'change']
					}],
				},
				lang: 'zh', //默认语言
				nationalitys: [ //国籍
					{
						name: '中国'
					},
					{
						name: '俄罗斯'
					}
				],
				language: [{ //切换语言
					name: '中'
				}, {
					name: 'RU'
				}],
				indexID: 0, //选中的下标
				countryID: 0, //国籍下标
				Choose_identity_index: 0, //选择身份的下标
			}
		},
		onShow() {
			this.nowLang = this.$i18n.locale
			// 获取当权语言
			this.getLang()


		},
		methods: {
			// 下一步
			handelSubmit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						let data = {
							country: this.countryID, //国籍
							identity_id: this.identityId, //身份
							username: this.model.username, //请输入公司名称/姓名
							area_id: this.model.area_id
						}
						console.log(this.identityType);
						switch (this.identityType) {
							// case 9:
							// 	uni.navigateTo({
							// 		url: '/pages/user/register/salesman?data=' + JSON.stringify(data)
							// 	})
							// 	break;
							case 0:
							case 1:
								uni.navigateTo({
									url: '/pages/user/register/supplier?data=' + JSON.stringify(data)
								})
								break;
							case 6:
							case 7:
								uni.navigateTo({
									url: '/pages/user/register/domesticIogistics?data=' + JSON.stringify(
										data)
								})
								break;
							case 4:
							case 9:
								uni.navigateTo({
									url: '/pages/user/register/serviceCompany?data=' + JSON.stringify(data)
								})
								break;
							case 5:
								uni.navigateTo({
									url: '/pages/user/register/declareCustoms?data=' + JSON.stringify(data)
								})
								break;
							case 2:
								uni.navigateTo({
									url: '/pages/user/register/freightForwarding?data=' + JSON.stringify(
										data)
								})
								break;
							case 8:
								uni.navigateTo({
									url: '/pages/user/register/driver?data=' + JSON.stringify(data)
								})
								break;
							case 3:
								uni.navigateTo({
									url: '/pages/user/register/purchase?data=' + JSON.stringify(data)
								})
								break;
							case 11:
								uni.navigateTo({
									url: '/pages/user/register/purchase?data=' + JSON.stringify(data)
								})
								break;
							default:
								console.log('err');
						}
					} else {
						console.log('验证失败')
					}
				})
			},
			// 获取所在地区的值
			selCity(key, value) {
				this.Location = value[0].value
				this.model.area_id = JSON.stringify(value[2].value)
				// 获取身份
				this.getIdentity()
			},
			// 选择的身份
			handelConfirm(e) {
				this.identityList.map(item => {
					item.active = false;
				})
				e.active = true;
				// this.selectorIndex = e[0]
				// this.identityId = this.identityList[e[0]].id
				// this.identityType = this.identityList[e[0]].type
				// if (this.lang === 'zh') {
				// 	this.identityTitle = this.identityList[e[0]].name
				// 	this.model.identity_title = this.identityList[e[0]].name
				// } else {
				// 	this.identityTitle = this.identityList[e[0]].name_ru
				// 	this.model.identity_title = this.identityList[e[0]].name_ru
				// }
				this.identityId = e.id;
				this.identityType = e.type;
				if (this.lang === 'zh') {
					this.identityTitle = e.name
					this.model.identity_title = e.name
				} else {
					this.identityTitle = e.name_ru
					this.model.identity_title = e.name_ru
				}
			},
			// 控制身份弹窗的显示与隐藏
			handelIdentity() {

				if (this.model.area_id) {
					this.identityShow = !this.identityShow
				} else {
					uni.showToast({
						title: this.$t('请选择地区'),
						icon: 'none'
					})
				}

			},
			// 切换语言
			handelLang(index) {
				// 设置手机号选择的+86或+7
				// this.AreaCode = this.selectorObj[index].name
				this.indexID = index
				// 切换语言
				if (index === 0) {
					this.lang = 'zh'
				} else {
					this.lang = 'ru'
				}
				/** 设置语言 */
				uni.setStorage({
					key: 'lang',
					data: this.lang
				})
				// 更新语言
				getApp().globalData.lang = this.lang
				this.$i18n.locale = this.lang
				uni.reLaunch({
					url: '/pages/user/register/authentication'
				})
			},
			// 返回首页
			handelReturn() {
				uni.switchTab({
					url: '/pages/tabbar/index'
				})
			},
			// 选择的国籍
			handelNationalitys(index) {
				// 下标赋值
				this.countryID = index
				// 选择的国家
				this.country = index
				if (index === 0) {
					this.lang = 'zh'
				} else {
					this.lang = 'ru'
				}
				/** 设置语言 */
				uni.setStorage({
					key: 'lang',
					data: this.lang
				})
				// 更新语言
				getApp().globalData.lang = this.lang
				this.$i18n.locale = this.lang
				// 选择国籍的同时切换国籍调取身份接口
				this.getIdentity()
				uni.reLaunch({
					url: '/pages/user/register/authentication'
				})
			},
			// 获取当前缓存语言
			getLang() {
				// 获取缓存lang当前语言值
				uni.getStorage({
					key: 'lang',
					success: res => {
						if (res.data == 'zh') { //zh为中国，赋值0
							this.indexID = 0
							this.countryID = 0
							this.lang = 'zh'
						} else { //其他为俄罗斯，赋值1
							this.indexID = 1
							this.countryID = 1
							this.lang = 'ru'
						}
					}
				});
			},
			// 获取身份信息
			getIdentity() {
				this.$u.api.basic.getIdentityList({
					country: this.country, //国家
					area: this.Location
				}).then(res => {
					this.identityList = res.map(item => {
						item.active = false;
						return item;
					})
					// this.identityList = res
				}).catch(err => {
					console.log('getIdentityList-err', err);
				});
			}
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		}
	}
</script>

<style lang="scss" scoped>
	.backColor {
		width: 100%;
		height: 1202rpx;
		background: linear-gradient(180deg, #E1F8C7 -3%, rgba(255, 255, 255, 0.2) 56%);
		position: absolute;
		top: 0;
		z-index: -1;
	}

	.no_border {
		border: none;
	}

	.flex_1 {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;

		&.wrap {
			flex-wrap: wrap;
		}
	}

	.custom-style {
		background-color: #000000;
		color: #ffffff;
	}

	.au_but {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 100rpx 0rpx 100rpx 0rpx;
	}

	.au_form {
		width: calc(100% - 80rpx);
	}

	.items_active {
		width: 48%;
		height: 150rpx;
		border: 4rpx solid #C3C3C3;
		border-radius: 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 36rpx;
		font-weight: 800;
	}

	.items {
		width: 48%;
		height: 150rpx;
		border: 4rpx solid #000000;
		border-radius: 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 36rpx;
		font-weight: 800;
	}

	.au_nat {
		width: calc(100% - 60rpx);
		height: 160rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 32rpx;
	}

	.au_identity_title {
		width: calc(100% - 60rpx);
		font-size: 28rpx;
		display: flex;
		justify-content: flex-start;
		font-weight: 600;
		margin-top: 60rpx;
	}

	.au_nationality_title {
		width: calc(100% - 60rpx);
		font-size: 28rpx;
		display: flex;
		justify-content: flex-start;
		font-weight: 600;
		margin-top: 60rpx;
	}

	.active {
		color: #A5A5A5;
		width: 116rpx;
		height: 48rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #FFFFFF;
		border: 1rpx solid #E2E2E2;
		border-radius: 10rpx;
	}

	.itemActive {
		width: 116rpx;
		height: 48rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 1rpx solid #707070;
		border-radius: 10rpx;
		color: #FFFFFF;
		background: linear-gradient(to right, #d2ef91, #e6f5cd)
	}

	.au_lang_ri {
		width: 250rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-weight: bold;
	}

	.au_imgs {
		margin-top: 18rpx;
		width: calc(100% - 60rpx);
		display: flex;
		flex-direction: column;
	}

	.au_lang {
		margin-top: 68rpx;
		width: calc(100% - 100rpx);
		display: flex;
		justify-content: flex-end;
	}

	.au_return {
		margin-top: 110rpx;
		width: calc(100% - 60rpx);
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.au_content {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.identity_item {
		flex: none;
		font-size: 24rpx;
		color: #C8C8C8;
		border: 1px solid #C8C8C8;
		border-radius: 16rpx;
		min-width: 156rpx;
		line-height: 24rpx;
		min-height: 60rpx;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 20rpx;

		&.active {
			color: #333333;
			border-color: #333333;
		}
	}
</style>